<style rel="stylesheet/scss" lang="scss" scoped>
</style>
<template>
  <div class="app-container calendar-list-container pdf-containier" v-if="!loading">
    <div class="pdf-out-con" v-if="!modelPbsId">
      <el-button type="warning" :disabled="exportLoading" class="" @click="getPdf('文件导出','pdf-doc-other')" v-if="pageType=='export'">导出</el-button>
    </div>
    <div id="pdf-doc-other" :class="{'pdf-doc':pageType=='export'&&!modelPbsId}">
      <custom-card title="基本信息">
        <basic-form :basicInfo="basicInfo" :detail="packingData.applyGraphic"></basic-form>
      </custom-card>
      <custom-card title="客供材料" class="mt-30">
        <upload-list v-model="packingData.designFileList" :disable="true"></upload-list>
      </custom-card>
      <custom-card title="包材料件" class="mt-30">
        <!-- 表格下拉 -->
        <el-table :data="packingData.applyGraphicItemsList" border style="width: 100% ;margin-top:15px;" default-expand-all>
          <!-- table展开列 -->
          <el-table-column type="expand">
            <template slot-scope="scope">
              <basic-form :basicInfo="basicInfoTypeBox" :detail="scope.row.pdsPackingDesignGraphicBox" :ref="'basicForm'+scope.$index" class="expand-column" v-if="scope.row.materialType==1&&scope.row.pdsPackingDesignGraphicBox"></basic-form>
              <basic-form :basicInfo="basicInfoOutBox" :detail="scope.row.pdsPackingDesignGraphicBox" :ref="'basicForm'+scope.$index" class="expand-column" v-if="scope.row.materialType==2&&scope.row.pdsPackingDesignGraphicBox"></basic-form>
              <basic-form :basicInfo="basicInfoTypeLable" :detail="scope.row.pdsPackingDesignGraphicOther" :ref="'basicForm'+scope.$index" class="expand-column" v-if="scope.row.materialType==3&&scope.row.pdsPackingDesignGraphicManual"></basic-form>
              <basic-form :basicInfo="basicInfoTypeDes" :detail="scope.row.pdsPackingDesignGraphicManual" :ref="'basicForm'+scope.$index" class="expand-column" v-if="scope.row.materialType==4&&scope.row.pdsPackingDesignGraphicManual"></basic-form>
              <basic-form :basicInfo="basicInfoTypeColorCard" :detail="scope.row.pdsPackingDesignGraphicOther" :ref="'basicForm'+scope.$index" class="expand-column" v-if="scope.row.materialType==5&&scope.row.pdsPackingDesignGraphicManual"></basic-form>
              <basic-form :basicInfo="basicInfoTypeOther" :detail="scope.row.pdsPackingDesignGraphicOther" :ref="'basicForm'+scope.$index" class="expand-column" v-if="scope.row.materialType==6&&scope.row.pdsPackingDesignGraphicOther"></basic-form>
            </template>
          </el-table-column>
          <el-table-column label="序号" width="50px" align="center">
            <template slot-scope="scope">
              <!-- {{scope.$index + pageData.start}} -->
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column label="类型" align="center">
            <template slot-scope="scope">
              <span v-for="item in materialTypeOptions" :key="item.id" v-if="scope.row.materialType==item.id">{{language=='en'?item.labelEnUs:item.labelZhCh}}</span>
            </template>
          </el-table-column>
          <el-table-column label="料号" align="center">
            <template slot-scope="scope">
              {{scope.row.materialNo}}
            </template>
          </el-table-column>
          <el-table-column label="品名" align="center">
            <template slot-scope="scope">
              {{scope.row.materialName}}
            </template>
          </el-table-column>
          <el-table-column label="材质" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.materialType==1">
                <span v-if="scope.row.colorBoxSurfaceTreatment">
                  {{getValue(colorBoxOptions,'id',language=='en'?'labelEnUs':'labelZhCh',scope.row.colorBoxSurfaceTreatment)}}
                </span>
                <span v-if="scope.row.colorBoxSurfaceTreatment==0">{{scope.row.colorBoxSurfaceTreatmentDesc}}</span>
                <span>+</span>
                <span v-if="scope.row.colorBoxBondingMethod==0">{{scope.row.colorBoxBondingMethodDesc}}</span>
                <span v-if="scope.row.colorBoxBondingMethod">
                  {{getValue(colorBoxBindingOptions,'id',language=='en'?'labelEnUs':'labelZhCh',scope.row.colorBoxBondingMethod)}}
                </span>
              </div>
              <div v-if="scope.row.materialType>1&&scope.row.materialType<6">
                <span v-if="scope.row.manualMaterialCode">
                  {{getValue(manualMaterialOptions,'id',language=='en'?'labelEnUs':'labelZhCh',scope.row.manualMaterialCode)}}
                </span>
                <span v-if="scope.row.manualMaterialCode==0">{{scope.row.manualMaterialDesc}}</span>
                <span>+</span>
                <span v-if="scope.row.manualCoverPageMaterialCode==0">{{scope.row.manualCoverPageMaterialDesc}}</span>
                <span v-if="scope.row.manualCoverPageMaterialCode">
                  {{getValue(manualCoverPageMaterialOptions,'id',language=='en'?'labelEnUs':'labelZhCh',scope.row.manualCoverPageMaterialCode)}}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="制作内容" align="center">
            <template slot-scope="scope">
              {{scope.row.makingContent}}
            </template>
          </el-table-column>
          <el-table-column label="文稿" align="center" width="140px" v-if="page!='apply'">
            <template slot-scope="scope">
              <a :href="baseUrl + '/' + scope.row.fileUrl" class="upload-tip" target="_blank" v-if="scope.row.fileId">{{scope.row.fileName}}</a>
              <span v-else>未上传</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" width="80px" v-if="page!='apply'">
            <template slot-scope="scope">
              <span v-for="option in applyGraphicItemsListStatusOptions" :key="option.id" v-if="scope.row.status==option.id">{{language=='en'?option.labelEnUs:option.labelZhCh}}</span>
            </template>
          </el-table-column>
        </el-table>
      </custom-card>
    </div>
  </div>
</template>



<script>
import { mapGetters } from 'vuex';
import BasicForm from '@/components/BasicForm/showDetail';
import * as api from '@/api/packing/index';
import * as baseApi from '@/api/common/index';
import graphicMixins from '../mixins/graphic';
import UploadList from '@/components/UploadList/index';
export default {
  name: 'user',
  components: {
    BasicForm,
    UploadList
    // 'depart-selector': () =>
    //   import ('./components/departSelector')
  },
  mixins: [graphicMixins],
  data() {
    return {
      exportLoading: true,
      pageType: null,
      modelPbsId: null
    };
  },
  created() {
    this.pageType = this.$route.query.type;
    this.modelPbsId = this.$route.query.modelPbsId
    this.getDict();
    this.getMaterialOptions();
    this.basicInfoTypeBox.map(item => {
      if (item.name === 'corrugatedNo') {
        item.element = 'input';
      }
    });
    this.basicInfoOutBox.map(item => {
      if (item.name === 'corrugatedNo') {
        item.element = 'input';
      }
    });
    const setBasicForm = () => {
      this.basicInfo.map(item => {
        if (
          item.name === 'plmModelNo'
        ) {
          item.element = 'input';
        }
      });
    };
    setBasicForm();
    this.setInitBasicFormShow();
    this.getDesignGraphicPPD();
  },
  activated() {
    this.page = this.$route.path.indexOf('require') > -1 ? 'apply' : 'design';
    this.modelPbsId = this.$route.query.modelPbsId
    this.pageType = this.$route.query.type;
    this.applyId = this.$route.query.applyId;
    this.getApplyGraphicById();
    console.log('asdasdasd',this.packingData.applyGraphic)
    this.getDesignGraphicPPD();
  },
  computed: {
    ...mapGetters(['elements', 'language'])
  },
  methods: {
    setPdfPage() {
      const pdf = document.getElementById('pdf-doc-other');
      const pageHeight = pdf.offsetWidth / 592.28 * 841.89;
      const preOrder = node => {
        let childs = node.children,
          item;
        for (let i = 0; i < childs.length; i++) {
          item = childs[i];
          if (item.nodeType === 1) {
            // 递归先序遍历子节点
            const offsetTop =
              item.getBoundingClientRect().top -
              pdf.getBoundingClientRect().top;
            const height = item.getBoundingClientRect().height + offsetTop;
            if (
              Math.floor(offsetTop / pageHeight) !=
              Math.floor(height / pageHeight)
            ) {
              if (
                item.className.indexOf('el-collapse-item__header') !== -1 ||
                item.children.length == 0
              ) {
                const paddingTop =
                  Math.ceil(offsetTop / pageHeight) * pageHeight -
                  offsetTop +
                  10;
                console.log('item', item, paddingTop);
                item.setAttribute('style', 'padding-top: ' + paddingTop + 'px');
              }
              preOrder(item);
            }
          }
        }
      };
      preOrder(pdf);
    },
    getDesignGraphicPPD() {
      this.loading = true;
      if (!this.$route.query.modelPbsId) {
        return;
      }
      api
        .getDesignGraphicPPD({ articleId: this.$route.query.modelPbsId })
        .then(res => {
          this.refreshCb(res);
        });
    }
  }
};
</script>
